<template>
  <div class="orders-container">
    <div class="header">
      <h1>订单管理</h1>
    </div>
    <div class="content">
      <div class="orders-table">
        <div v-if="loading" class="loading">
          <i class="material-icons loading-icon">refresh</i>
          <span>加载中...</span>
        </div>
        <table v-else>
          <thead>
            <tr>
              <th>订单ID</th>
              <th>用户ID</th>
              <th>用户名称</th>
              <th>商家ID</th>
              <th>商家名称</th>
              <th>下单时间</th>
              <th>订单金额</th>
              <th>状态</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="order in orders" :key="order.orderId">
              <td>{{ order.orderId }}</td>
              <td>{{ order.userId }}</td>
              <td>{{ order.userName || '-' }}</td>
              <td>{{ order.businessId }}</td>
              <td>{{ order.businessName || '-' }}</td>
              <td>{{ formatDate(order.orderDate) }}</td>
              <td>¥{{ formatAmount(order.orderTotal || order.finalTotal) }}</td>
              <td>{{ order.orderState }}</td>
            </tr>
            <tr v-if="orders.length === 0">
              <td colspan="8" class="no-data">暂无订单数据</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="pagination" v-if="totalPages > 1">
        <button class="page-btn" :disabled="currentPage <= 1" @click="changePage(currentPage - 1)">
          上一页
        </button>
        <span class="page-info">第 {{ currentPage }} 页，共 {{ totalPages }} 页</span>
        <button class="page-btn" :disabled="currentPage >= totalPages" @click="changePage(currentPage + 1)">
          下一页
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'Orders',
  data() {
    return {
      orders: [],
      loading: false,
      currentPage: 1,
      pageSize: 20,
      total: 0
    }
  },
  computed: {
    totalPages() {
      return Math.ceil(this.total / this.pageSize) || 1
    }
  },
  mounted() {
    this.fetchOrders()
  },
  methods: {
    async fetchOrders() {
      this.loading = true
      try {
        const response = await axios.post('http://localhost:8888/elm/admin/orders/list', null, {
          params: {
            page: this.currentPage,
            size: this.pageSize
          }
        })
        if (response.data && (response.data.code === 200 || response.data.code === '200')) {
          const result = response.data.result || {}
          this.orders = result.orders || []
          this.total = result.total || this.orders.length
        } else {
          this.orders = []
          this.total = 0
        }
      } catch (error) {
        console.error('获取订单列表失败:', error)
        this.orders = []
        this.total = 0
      } finally {
        this.loading = false
      }
    },
    changePage(page) {
      if (page < 1 || page > this.totalPages) return
      this.currentPage = page
      this.fetchOrders()
    },
    formatDate(dateString) {
      if (!dateString) return '-'
      try {
        const d = new Date(dateString)
        if (isNaN(d.getTime())) return dateString
        return d.toLocaleString('zh-CN', {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit',
          hour: '2-digit',
          minute: '2-digit'
        })
      } catch (e) {
        return dateString
      }
    },
    formatAmount(amount) {
      const num = parseFloat(amount || 0)
      return num.toFixed(2)
    }
  }
}
</script>

<style scoped>
.orders-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f5f5f5;
}

.header {
  background: white;
  padding: 20px 30px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.header h1 {
  margin: 0;
  font-size: 24px;
  color: #333;
}

.content {
  flex: 1;
  overflow-y: auto;
  padding: 30px;
}

.orders-table {
  background: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.loading {
  padding: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #666;
}

.loading-icon {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

table {
  width: 100%;
  border-collapse: collapse;
}

thead {
  background-color: #f5f5f5;
}

th {
  padding: 15px;
  text-align: left;
  font-weight: 600;
  color: #333;
  border-bottom: 2px solid #eee;
}

td {
  padding: 15px;
  border-bottom: 1px solid #eee;
}

.no-data {
  text-align: center;
  color: #999;
}

.pagination {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.page-btn {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  background-color: #1976d2;
  color: white;
  cursor: pointer;
}

.page-btn:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.page-info {
  font-size: 14px;
  color: #555;
}
</style>
